<template>
    <div class="login">
        <div class="loginContent">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        ruleForm: {
          username: "",
          password: ""
        },
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
          ]
        },
      }
    },
    methods: {
      submitForm(formName) {
        let self = this;
        const data = {
          username: this.ruleForm.username,
          password: this.ruleForm.password
        };
        this.$refs[formName].validate((valid) => {
          if (valid) {
            self.$store.dispatch('accountLogin', data).then((data) => {
              console.log(data);
              if (data.code === 0) {
                localStorage.setItem('Authorization', data.data.token);
                self.$store.state.login.isLogin = true;
                self.$router.push('/img');
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss">
    @import "../assets/css/appMixin";

    .login {
        @include pos(0, 0);
        @include wh(100%, 100%);

        .loginContent {
            @include pos(30%, 40%);
            width: 650px;
            height: 100%;
            position: absolute;
        }

    }
</style>
